<template>
  <view class="container">
    <!-- 位置选择框 -->
    <view class="select-box" @click="toggleLocationPicker">
      <view class="select-left">
        <image class="select-icon" src="/static/img/place.png" mode="aspectFit"></image>
      </view>
      <view class="select-content">
        <text class="chinese-label">您的位置</text>
        <text class="english-label" v-if="!selectedLocation">Your Location</text>
        <text class="selected-value" v-if="selectedLocation">{{ selectedLocation.text }}</text>
      </view>
      <view class="select-right">
        <image class="arrow-icon" src="/static/img/up.png" mode="aspectFit"></image>
      </view>
    </view>

    <!-- 目的地选择框 -->
    <view class="select-box" @click="toggleDestinationPicker">
      <view class="select-left">
        <image class="select-icon" src="/static/img/destination.png" mode="aspectFit"></image>
      </view>
      <view class="select-content">
        <text class="chinese-label">您要去哪儿</text>
        <text class="english-label" v-if="!selectedDestination">Where are you going</text>
        <text class="selected-value" v-if="selectedDestination">{{ selectedDestination.text }}</text>
      </view>
      <view class="select-right">
        <image class="arrow-icon" src="/static/img/up.png" mode="aspectFit"></image>
      </view>
    </view>

    <!-- 位置选择器 -->
    <uni-popup ref="locationPopup" type="bottom" background-color="#fff">
      <view class="picker-header">
        <text class="picker-title">选择位置</text>
        <text class="picker-close" @click="closeLocationPicker">完成</text>
      </view>
      <picker-view class="picker-view" :value="locationIndex" @change="onLocationChange">
        <picker-view-column>
          <view class="picker-item" v-for="(item, index) in locationOptions" :key="index">{{ item.text }}</view>
        </picker-view-column>
      </picker-view>
    </uni-popup>

    <!-- 目的地选择器 -->
    <uni-popup ref="destinationPopup" type="bottom" background-color="#fff">
      <view class="picker-header">
        <text class="picker-title">选择目的地</text>
        <text class="picker-close" @click="closeDestinationPicker">完成</text>
      </view>
      <picker-view class="picker-view" :value="destinationIndex" @change="onDestinationChange">
        <picker-view-column>
          <view class="picker-item" v-for="(item, index) in destinationOptions" :key="index">{{ item.text }}</view>
        </picker-view-column>
      </picker-view>
    </uni-popup>
  </view>
</template>

<script>
export default {
	props: {
	    // 位置选项数组
	    locationOptions: {
	      type: Array,
	      default: () => ['北京', '上海', '广州', '深圳', '杭州', '成都', '武汉', '西安']
	    },
	    // 目的地选项数组
	    destinationOptions: {
	      type: Array,
	      default: () => ['公司', '家', '餐厅', '商场', '电影院', '健身房', '公园', '机场']
	    },
	    initialLocationIndex: {
	      type: Number,
	      default: 0
	    },
	    initialDestinationIndex: {
	      type: Number,
	      default: 0
	    }
	  },
	data() {
		return {
		  selectedLocation: '',
		  selectedDestination: '',
		  locationIndex: 0,
		  destinationIndex: 0,
		  locationOptions: this.locationOptions,
		  destinationOptions: this.destinationOptions,
		};
	},
	methods: {
		toggleLocationPicker() {
		  this.$refs.locationPopup.open();
		},
		toggleDestinationPicker() {
		  this.$refs.destinationPopup.open();
		},
		closeLocationPicker() {
		  this.$refs.locationPopup.close();
		},
		closeDestinationPicker() {
		  this.$refs.destinationPopup.close();
		},
		onLocationChange(e) {
		  this.locationIndex = e.detail.value[0];
		  this.selectedLocation = this.locationOptions[this.locationIndex];
		},
		onDestinationChange(e) {
		  this.destinationIndex = e.detail.value[0];
		  this.selectedDestination = this.destinationOptions[this.destinationIndex];
		}
	}
};
</script>

<style scoped>
.container {
  background-color: #fff;
}

.select-box {
  display: flex;
  align-items: center;
  padding: 30rpx;
  border-bottom: 1rpx solid #f5f5f5;
  position: relative;
}

.select-left {
  margin-right: 20rpx;
}

.select-icon {
  width: 50rpx;
  height: 50rpx;
}

.select-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.chinese-label {
  font-size: 32rpx;
  font-weight: 500;
  color: #1a1a1a;
  margin-bottom: 8rpx;
}

.english-label {
  font-size: 24rpx;
  color: #999;
}

.selected-value {
  font-size: 28rpx;
  color: #333;
  margin-top: 10rpx;
}

.select-right {
  margin-left: 20rpx;
}

.arrow-icon {
  width: 30rpx;
  height: 30rpx;
}

.picker-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  border-bottom: 1rpx solid #f5f5f5;
}

.picker-title {
  font-size: 32rpx;
  font-weight: 500;
  color: #1a1a1a;
}

.picker-close {
  font-size: 32rpx;
  color: #007AFF;
}

.picker-view {
  height: 400rpx;
}

.picker-item {
  line-height: 80rpx;
  text-align: center;
  font-size: 32rpx;
}
</style>